<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<input type="button" value="按钮1" class="active"/>
			<input type="button" value="按钮2" />
			<input type="button" value="按钮3" />
			<div style="display: block;">
				div1
			</div>
			<div style="display: none;">
				div2
			</div>
			<div style="display: none;">
				div3
			</div>
		</div>
		
		
	</body>
	<script type="text/javascript">
		window.onload = function(){  
	    var t1 = new Tab("div1");  
	    t1.init();  
	}  
	  
	function Tab(id){  
	    this.oParent = document.getElementById(id);  
	    this.aInput = this.oParent.getElementsByTagName("input");  
	    this.aDiv = this.oParent.getElementsByTagName("div");  
	    this.iNow = 0;  
	}  
	  
	Tab.prototype.init = function(){  
	    var This = this;  
	    for(var i=0; i<this.aInput.length;i++){  
	        this.aInput[i].index = i;  
	        this.aInput[i].onclick=function(){  
	            This.change(this);  
	        }  
	    }     
	}  
	  
	Tab.prototype.change = function(obj){  
	    for(var i=0; i<this.aInput.length;i++){  
	        this.aInput[i].className="";  
	        this.aDiv[i].style.display="none";  
	    }  
	    obj.className="active";  
	    this.aDiv[obj.index].style.display="block";  
	}
	</script>
</html>
